<script setup lang='ts'>
  import { reactive, computed } from 'vue';
  import { getAssetsFile } from '@/utils/public';
  import { storeToRefs } from 'pinia'; 
  import { userStore } from '@/pinia/modules/user'
  const UseUserStore = userStore()
  const { weekNow, weekLast } = storeToRefs(UseUserStore)
  import theme from '@/utils/theme'
  import integralbox from '@/components/integral.vue';
  const props = defineProps({
    pagetype:{
      type:Number,
      default:0
    }
  })
  const titleImg = computed(()=>{
    const { pagetype:type } = props
    if(type == 0) {
      action.weekList = weekNow.value
      return theme.giftTitle
    }
    if(type == 1) {
      action.weekList = weekLast.value
      return theme.agoGiftTitle
    }
    return ''
  })
  const action = reactive({
    weekList:[] as Array<any>
  })
</script>

<template>
  <div class="exclusiveGift">
    <div class="giftMain">
      <img src="@/assets/images/icon1.png" class="left top">
      <img src="@/assets/images/icon1.png" class="left bottom left-bottom">
      <img src="@/assets/images/icon1.png" class="right top right-top">
      <img src="@/assets/images/icon1.png" class="right bottom right-bottom">
      <img v-if="titleImg" :src="getAssetsFile(titleImg)" class="titleimg" />
      <div class="giftlist flex-center-wrap ">
        <div v-for="(item,index) in action.weekList" 
        :class="[
          'giftbox',
          index==0?'keyOne':'',
          item.tipsType==2?'tipsimg':''
        ]">
          <div class="gift boxback">
            <div class="imgborder">
              <img :src="item.image">
            </div>
          </div>
          <div class="giftName">{{ item.name }}</div>
          <integralbox class="integralbox" :score="item.price" />
        </div>
      </div>
      <div class="tipsbox boxback">每送出/收到1钻石，增加<span>1</span>周星值</div>
    </div>
  </div>
</template>

<style lang='scss' scoped>
  $titleTop:14px;
  .exclusiveGift {
    width: max-content;
    margin-bottom: 20px;
    padding: $titleTop 0 0;
    box-sizing: border-box;
  }
  .giftMain {
    position: relative;
    width: 343px;
    height: 464px;
    padding: 49px 0 17px;
    box-sizing: border-box;
    background: $boxBackColor;
    border-radius: 10px;
    border: 3px solid $boxborderColor;
    display: flex;
    flex-direction: column;
    .titleimg {
      position: absolute;
      top: -$titleTop;
      left: 50%;
      transform: translateX(-50%);
      width: auto;
      height: 52px;
    }
    .boxback {
      background: $boxGiftBackColor;
      box-shadow: inset 0px 2px 0px 0px rgba(0,0,0,0.4);
    }
    .giftlist {
      flex: 1;
      .giftbox {
        position: relative;
        width: max-content;
        .gift {
          width: 104px;
          height: 104px;
          border-radius: 12px;
        }
        .giftName {
          line-height: 22px;
          color: $fontColor;
          font-size: 16px;
          font-weight: 500;
          text-align: center;
          margin: 4px 0 2px;
        }
      }
      .giftbox:nth-last-child(1) {
        margin-left: 50px;
      }
      .keyOne {
        width: 100%;
        margin-bottom: 16px;
        .gift {
          width: 128px;
          height: 128px;
          padding: 4px;
          box-sizing: border-box;
          margin: 0 auto;
        }
        .imgborder {
          overflow: hidden;
          width: 120px;
          height: 120px;
          border-radius: 8px;
          padding: 4px;
          box-sizing: border-box;
          border: 1px solid #B28426;
        }
      }
      .tipsimg::after {
        display: block;
        content: '';
        position: absolute;
        top: -4px;
        left: 50%;
        transform: translateX(-50%);
        width: 154px;
        height: 24px;
        background: url('@/assets/images/tipsimg.png') left top /100% 100% no-repeat;
      }
    }
    .tipsbox {
      width: 303px;
      height: 36px;
      line-height: 38px;
      font-size: 14px;
      font-weight: 500;
      color: $fontColor;
      text-align: center;
      margin: 16px auto 0;
      border-radius: 18px;
      span {
        color: #FFE342;
      }
    }
    .left, .right{
      position: absolute;
      width: 30px;
      height: 30px;
    }
    .left {left: -3px;}
    .right { right: -3px;}
    .top {top: -3px;}
    .bottom {bottom: -3px;}
    .left-bottom {transform: rotateX(180deg);}
    .right-top {transform: rotateY(180deg);}
    .right-bottom {transform: rotate(180deg);}
  }
</style>